<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>北京科技报</title>
	<link href="css/common.css" rel="stylesheet">
	<link href="css/public.css" rel="stylesheet">
	<link href="css/topicList.css" rel="stylesheet">
	<link href="css/bookstarp.css" rel="stylesheet">
	<link href="css/swiper.css" rel="stylesheet">
	<script src="js/swiper.js"></script>
	<script src="js/vue.js"></script>
</head>

<body>
	<div id="swiper-header-container" class="swiper-container swiper-header-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<img class="banner_header_img" src="images/special/banner-1-3.jpg" />
			</div>
			<div class="swiper-slide">
				<img class="banner_header_img" src="images/special/banner-1-3.jpg" />
			</div>
		</div>
	</div>
	<div id="specialPage" class="flex justify-between list_box">
		<div class="page_left">
			<div class="news">
				<div class="font-24 color-main news_title">前言</div>
				<div class="news_content margin-top-8 text_ellipsis_3">
					论坛邀请中国科学院院士、清华大学教授、联盟专家委主任委员欧阳明高，中国工程院院士、中国机械工业集团有限公司党委常委、副总经理、总工程师陈学东，国际电工委员会燃料电池技术委员会（IEC/TC
					105）主席HongKi Lee，同济大学长聘特聘教授、博士生导师明平文作主旨演讲。
				</div>
				<div class="marks_img_box marks_left">
					<img class="marks_img" src="images/special/marks_left.png" />
				</div>
				<div class="marks_img_box marks_right">
					<img class="marks_img" src="images/special/marks_right.png" />
				</div>
			</div>
			<div class="detail_model_header" style="margin-top: 40px">
				<div class="flex justify-between align-center">
					<div class="font-22 detail_model_header_left color-main">分类栏目标题</div>
					<div class="flex justify-end align-center detail_model_header_right">
					</div>
				</div>
				<div class="flex align-center bg-ff">
					<div class="header-xian flex-one"></div>
					<div class="header-radius"></div>
				</div>
			</div>
			<div class="page_list_box">
				<div v-if="loadData.length">
					<div v-for="(item, index) in loadData" v-bind:key="index">
						<div class="flex justify-start margin-top-30">
							<div class="page_style_one_box">
								<img class="page_style_one_img" :src="item.img" alt="" />
							</div>
							<div class="page_style_one_text">
								<div class="page_style_one_title ellipsis">
									{{ item.title }}
								</div>
								<div class="page_style_one_content text_ellipsis_3">
									{{ item.content }}
								</div>
								<div class="page_style_one_date">
									{{ item.date }} <span style="margin-left: 10px;">{{ item.remark }}</span>
								</div>
							</div>
						</div>
					</div>
					<div class="flex justify-center font-16 load_more" @click="loadData">
						<div class="color-main load_more_text">点击加载更多</div>
						<img class="load_more_img" src="images/special/more.jpg" />
					</div>
				</div>
				<div v-else class="no_content">
					<img src="images/none.png" alt="">
					<div class="font-18 text-center margin-top-20 no_text">暂无内容</div>
				</div>
			</div>
			<div class="detail_model_header" style="margin-top: 40px">
				<div class="flex justify-between align-center">
					<div class="font-22 detail_model_header_left color-main">分类栏目标题</div>
					<div class="flex justify-end align-center detail_model_header_right">
					</div>
				</div>
				<div class="flex align-center bg-ff">
					<div class="header-xian flex-one"></div>
					<div class="header-radius"></div>
				</div>
			</div>
			<div class="page_list_box">
				<div v-if="loadData2.length">
					<div v-for="(item, index) in loadData2" v-bind:key="index">
						<div class="flex justify-start margin-top-30">
							<div class="page_style_one_box">
								<img class="page_style_one_img" :src="item.img" alt="" />
							</div>
							<div class="page_style_one_text">
								<div class="page_style_one_title ellipsis">
									{{ item.title }}
								</div>
								<div class="page_style_one_content text_ellipsis_3">
									{{ item.content }}
								</div>
								<div class="page_style_one_date">
									{{ item.date }} <span style="margin-left: 10px;">{{ item.remark }}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div v-else class="no_content">
					<img src="images/none.png" alt="">
					<div class="font-18 text-center margin-top-20 no_text">暂无内容</div>
				</div>
			</div>
			<div class="detail_model_header" style="margin-top: 40px">
				<div class="flex justify-between align-center">
					<div class="font-22 detail_model_header_left color-main">分类栏目标题</div>
					<div class="flex justify-end align-center detail_model_header_right">
					</div>
				</div>
				<div class="flex align-center bg-ff">
					<div class="header-xian flex-one"></div>
					<div class="header-radius"></div>
				</div>
			</div>
			<div class="margin-bottom-30 page_list_box">
				<div v-if="loadData3.length">
					<div v-for="(item, index) in loadData3" v-bind:key="index">
						<div class="flex justify-start margin-top-30">
							<div class="page_style_one_box">
								<img class="page_style_one_img" :src="item.img" alt="" />
							</div>
							<div class="page_style_one_text">
								<div class="page_style_one_title ellipsis">
									{{ item.title }}
								</div>
								<div class="page_style_one_content text_ellipsis_3">
									{{ item.content }}
								</div>
								<div class="page_style_one_date">
									{{ item.date }} <span style="margin-left: 10px;">{{ item.remark }}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div v-else class="no_content">
					<img src="images/none.png" alt="">
					<div class="font-18 text-center margin-top-20 no_text">暂无内容</div>
				</div>
			</div>
		</div>
		<div class="page_right">
			<div class="special_recom">
				<img class="special_recom_img" src="images/special/special_recom.jpg" />
				<div class="flex justify-start special_recom_content">
					<div class="special_recom_content_img">
						专题推荐
					</div>
					<div class="ellipsis font-16 special_recom_content_text">
						畅游无边界科技馆之城特展活动开幕特展活动开幕特展活动开幕特展活动开幕
					</div>
				</div>
			</div>
			<div class="special_recom">
				<img class="special_recom_img" src="images/special/special_recom.jpg" />
				<div class="flex justify-start special_recom_content">
					<div class="special_recom_content_img">
						专题推荐
					</div>
					<div class="ellipsis font-16 special_recom_content_text">
						畅游无边界科技馆之城特展活动开幕特展活动开幕特展活动开幕特展活动开幕
					</div>
				</div>
			</div>
			<div class="special_recom">
				<img class="special_recom_img" src="images/special/special_recom.jpg" />
				<div class="flex justify-start special_recom_content">
					<div class="special_recom_content_img">
						专题推荐
					</div>
					<div class="ellipsis font-16 special_recom_content_text">
						畅游无边界科技馆之城特展活动开幕特展活动开幕特展活动开幕特展活动开幕
					</div>
				</div>
			</div>
			<div id="swiper-poster-container" class="swiper-container swiper-poster-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="item in posterList" :key="item.id">
						<img class="banner_poster_img" :src="item.imgUrl" />
					</div>
				</div>

				<!-- Add Arrows -->
				<div class="swiper-button-next swiper-button-white"></div>
				<div class="swiper-button-prev swiper-button-white"></div>

				<!-- Add Pagination -->
				<div class="swiper-pagination"></div>
			</div>
			<div class="poster_base font-16 color-ff">
				<span class="text_ellipsis">{{posterList[swiperactiveIndex]?.title}}</span>
				<div class="triangle_left"></div>
				<div class="triangle_right"></div>
			</div>
			<div id="swiper-bottom-container"
				class="margin-top-30 margin-bottom-30 swiper-container swiper-bottom-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img class="banner_bottom_img" src="images/special/banner-1-2.jpg" />
					</div>
					<div class="swiper-slide">
						<img class="banner_bottom_img" src="images/special/banner-1-2.jpg" />
					</div>
				</div>
			</div>
		</div>
	</div>
	<iframe style="width: 100%;height: 237px;border: none; overflow: hidden;" src="footer.html"
		frameborder="0"></iframe>
</body>

</html>
<script src="js/topicList.js"></script>
